<template>
  <div class="property-panel" ref="propertyPanel">
    <el-form
      :inline="false"
      :model="form"
      label-width="80px"
      size="small"
      label-position="left"
    >
      <!-- <el-form-item label="节点类型">
        <el-input v-model="form.$type" disabled></el-input>
      </el-form-item>
      <el-form-item label="节点ID">
        <el-input v-model="form.id" disabled></el-input>
      </el-form-item> -->
      <el-form-item label="节点名称">
        <el-input v-model="form.name" @input="nameChange"></el-input>
      </el-form-item>

      <template v-if="element && userTask">
        <!-- 指定节点表单 -->
        <!-- <el-form-item label="表单类型">
          <el-input v-model="form.formCategory"></el-input>
        </el-form-item>
        <el-form-item label="表单KEY">
          <el-input v-model="form.formKey"></el-input>
        </el-form-item> -->
        <!-- 任务节点允许选择人员 -->
        <el-form-item label="节点人员">
          <!-- <el-select
            v-model="form.userType"
            placeholder="请选择"
            @change="typeChange"
          >
            <el-option value="assignee" label="指定人员"></el-option>
            <el-option value="candidateUsers" label="候选人员"></el-option>
            <el-option value="candidateGroups" label="角色/岗位"></el-option>
          </el-select> -->
          <el-input placeholder="" v-model="form.candidateUsers">
            <i
              slot="suffix"
              class="el-icon-search"
              @click="handleOpenDialog"
            ></i>
          </el-input>
        </el-form-item>
        <!-- 指定人员 -->
        <!-- <el-form-item
          label="指定人员"
          v-if="userTask && form.userType === 'assignee'"
        >
          <el-select
            v-model="form.assignee"
            placeholder="请选择"
            key="1"
            @change="(value) => addUser({ assignee: value })"
          >
            <el-option
              v-for="item in users"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- 候选人员 -->
        <!-- <el-form-item
          label="候选人员"
          v-else-if="userTask && form.userType === 'candidateUsers'"
        >
          <el-select
            v-model="form.candidateUsers"
            placeholder="请选择"
            key="2"
            multiple
            @change="
              (value) => addUser({ candidateUsers: value.join(',') || value })
            "
          >
            <el-option
              v-for="item in users"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- 角色/岗位 -->
        <!-- <el-form-item
          label="角色/岗位"
          v-else-if="userTask && form.userType === 'candidateGroups'"
        >
          <el-select
            v-model="form.candidateGroups"
            placeholder="请选择"
            @change="(value) => addUser({ candidateGroups: value })"
          >
            <el-option
              v-for="item in roles"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item> -->
      </template>
    </el-form>
    <el-dialog title="节点人员" :visible.sync="open" width="30%" center>
      <el-table
        :data="tableData"
        style="width: 100%"
        @selection-change="handleSelectTable"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="userName" label="名称" width="180">
        </el-table-column>
        <el-table-column prop="nickName" label="昵称"> </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="open = false" class="dialogCancel">取 消</el-button>
        <el-button type="primary" @click="handleSelectUser" class="tableAdd"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { userName } from "@/api/approvalManage/processManage.js";
export default {
  name: "NodePropertyPanel",
  props: {
    /**
     * BpmnModeler设计器对象
     */
    modeler: {
      type: Object,
      required: true,
    },
  },
  computed: {
    userTask() {
      if (!this.element) {
        return;
      }
      return this.element.type === "bpmn:UserTask";
    },
    sequenceFlow() {
      if (!this.element) {
        return;
      }
      return this.element.type === "bpmn:SequenceFlow";
    },
  },
  data() {
    return {
      form: {
        id: "",
        name: "",
        color: null,
      },
      open: false,
      element: {},
      users: [{ value: 1, label: "测试" }],
      tableData: [],
      selectData: []
    };
  },
  mounted() {
    this.handleModeler();
  },
  methods: {
    handleModeler() {
      // 监听节点选择变化
      this.modeler.on("selection.changed", (e) => {
        const element = e.newSelection[0];
        if (!element) {
          return;
        }
        this.element = element;
        this.form = {
          ...element.businessObject,
          ...element.businessObject.$attrs,
        };
        if (this.form.userType === "candidateUsers") {
          this.form["candidateUsers"] =
            this.form["candidateUsers"].split(",") || [];
        }
      });

      //  监听节点属性变化
      this.modeler.on("element.changed", (e) => {
        const { element } = e;
        if (!element) {
          return;
        }
        //  新增节点需要更新回属性面板
        if (element.id === this.form.id) {
          this.form.name = element.businessObject.name;
          this.form = { ...this.form };
        }
      });
    },

    // 属性面板名称，更新回流程节点
    nameChange(name) {
      const modeling = this.modeler.get("modeling");
      modeling.updateLabel(this.element, name);
    },

    // 属性面板颜色，更新回流程节点
    colorChange(color) {
      const modeling = this.modeler.get("modeling");
      modeling.setColor(this.element, {
        fill: null,
        stroke: color,
      });
      modeling.updateProperties(this.element, { color: color });
    },

    // 任务节点配置人员
    addUser(properties) {
      this.updateProperties(
        Object.assign(properties, {
          userType: Object.keys(properties)[0],
        })
      );
    },

    // 切换人员类型
    typeChange() {
      const types = ["assignee", "candidateUsers", "candidateGroups"];
      types.forEach((type) => {
        delete this.element.businessObject.$attrs[type];
        delete this.form[type];
      });
    },

    // 在这里我们封装一个通用的更新节点属性的方法
    updateProperties(properties) {
      const modeling = this.modeler.get("modeling");
      modeling.updateProperties(this.element, properties);
    },
    // 打开节点人员放大镜
    handleOpenDialog() {
      userName().then((res) => {
        this.tableData = res.rows;
        this.open = true;
      });
    },
    // 放大镜表格多选返回函数
    handleSelectTable(row) {
      this.selectData = row.map(item => {
        return item.userId;
      })
      this.form.candidateUsers = row.map(item => {
        return item.userName;
      })
    },
    // 节点人员选择
    handleSelectUser() {
      const params = {
        candidateUsers: this.selectData.join(',')
      }
      this.updateProperties(
        Object.assign(params, {
          userType: Object.keys(params)[0],
        })
      );
      this.open = false;
    },
  },

  watch: {
    "form.name": {
      handler(val) {
        if (this.element) {
          this.element.businessObject.name = val;
        }
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.property-panel {
  padding: 10px;
  width: 100%;
}
::v-deep .el-input--prefix {
  .el-input__inner {
    padding-right: 30px;
    padding-left: 5px;
  }
  .el-input__prefix {
    right: 12px;
  }
}
::v-deep .el-form-item__content {
  overflow: hidden;
}
</style>
